<template>
  <div class="test-view">
    <!-- 测试系统容器 -->
    <div class="test-container">
      <!-- 历史区域 -->
      <div class="history-section">
        <div class="section-header">
          <h3>评测历史</h3>
        </div>
        <div class="messages-container" ref="messagesContainer">
          <ChatMessage 
            v-for="(message, index) in messages" 
            :key="index" 
            :content="message.content" 
            :type="message.type"
            @content-updated="scrollToBottom"
          />
        </div>
      </div>
      
      <!-- 输入区域 -->
      <div class="input-section">
        <div class="section-header">
          <h3>提交测评</h3>
        </div>
        <div class="test-form">
          <div class="form-group">
            <label for="question">考试问题</label>
            <textarea 
              id="question"
              v-model="question" 
              placeholder="请输入计算机网络相关的考试问题..." 
              :disabled="isLoading"
              rows="3"
            ></textarea>
          </div>
          
          <div class="form-group">
            <label for="answer">您的答案</label>
            <textarea 
              id="answer"
              v-model="answer" 
              placeholder="请输入您的答案..." 
              :disabled="isLoading"
              @keydown.ctrl.enter="submitEvaluation"
              rows="5"
            ></textarea>
          </div>
          
          <div class="form-actions">
            <span class="input-helper">按 <kbd>Ctrl</kbd> + <kbd>Enter</kbd> 提交</span>
            <div class="buttons-group">
              <button 
                class="secondary" 
                @click="resetHistory" 
                :disabled="isLoading"
              >
                清空历史
              </button>
              <button 
                class="primary"
                @click="submitEvaluation" 
                :disabled="!canSubmit || isLoading"
              >
                {{ isLoading ? '评估中...' : '提交评分' }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 评分标准说明 -->
    <div class="criteria-section">
      <div class="section-header small">
        <h4>评分标准</h4>
      </div>
      <div class="criteria-cards">
        <div class="criteria-card">
          <div class="criteria-icon">✓</div>
          <div class="criteria-content">
            <div class="criteria-title">完全正确</div>
            <div class="criteria-desc">答案完全符合知识点要求</div>
          </div>
        </div>
        
        <div class="criteria-card">
          <div class="criteria-icon">◑</div>
          <div class="criteria-content">
            <div class="criteria-title">部分正确</div>
            <div class="criteria-desc">答案包含部分正确知识点</div>
          </div>
        </div>
        
        <div class="criteria-card">
          <div class="criteria-icon">✗</div>
          <div class="criteria-content">
            <div class="criteria-title">回答错误</div>
            <div class="criteria-desc">答案存在明显错误或偏离题意</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import ChatMessage from '@/components/ChatMessage.vue';

export default {
  name: 'TestView',
  components: {
    ChatMessage
  },
  data() {
    return {
      question: '',
      answer: '',
      autoScrollEnabled: true  // 默认启用自动滚动
    };
  },
  computed: {
    ...mapState({
      messages: state => state.testMessages,
      isLoading: state => state.isLoading
    }),
    canSubmit() {
      return this.question.trim().length > 0 && this.answer.trim().length > 0;
    }
  },
  methods: {
    ...mapActions([
      'submitTest',
      'resetTestHistory'
    ]),
    submitEvaluation() {
      if (!this.canSubmit || this.isLoading) return;
      
      // 确保传递的是字符串类型
      const questionText = String(this.question || '');
      const answerText = String(this.answer || '');
      
      if (questionText.trim() && answerText.trim()) {
        this.submitTest({
          question: questionText,
          answer: answerText
        });
        
        // 清空输入
        this.question = '';
        this.answer = '';
      }
    },
    resetHistory() {
      this.resetTestHistory();
      this.scrollToBottom();
    },
    scrollToBottom() {
      // 只有当自动滚动启用时才滚动
      if (this.autoScrollEnabled && this.$refs.messagesContainer) {
        this.$nextTick(() => {
          const container = this.$refs.messagesContainer;
          container.scrollTop = container.scrollHeight;
        });
      }
    },
    handleScroll() {
      if (this.$refs.messagesContainer) {
        const container = this.$refs.messagesContainer;
        // 检测用户是否已经滚动到接近底部的位置
        const isAtBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 100;
        
        // 只有当用户手动滚动（不在底部）时才禁用自动滚动
        this.autoScrollEnabled = isAtBottom;
      }
    }
  },
  watch: {
    // 监听消息变化，自动滚动到底部
    messages: {
      handler() {
        this.scrollToBottom();
      },
      deep: true
    }
  },
  mounted() {
    // 初始滚动到底部
    this.scrollToBottom();
    
    // 添加滚动事件监听，检测用户是否手动滚动
    if (this.$refs.messagesContainer) {
      this.$refs.messagesContainer.addEventListener('scroll', this.handleScroll);
    }
  },
  beforeUnmount() {
    // 组件卸载前，移除滚动事件监听
    if (this.$refs.messagesContainer) {
      this.$refs.messagesContainer.removeEventListener('scroll', this.handleScroll);
    }
  }
}
</script>

<style scoped>
.test-view {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
  padding-bottom: 1rem;
}

.test-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  background-color: transparent;
}

.section-header {
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 0.8rem;
  margin-bottom: 1rem;
}

.section-header.small {
  padding-bottom: 0.5rem;
}

.section-header h3,
.section-header h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}

.history-section,
.input-section {
  background-color: white;
  border-radius: 8px;
  padding: 1.2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.messages-container {
  height: calc(100% - 50px);
  overflow-y: auto;
  padding-right: 0.5rem;
  scroll-behavior: smooth; /* 添加平滑滚动效果 */
}

.test-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

label {
  font-size: 0.9rem;
  color: #555;
  font-weight: 500;
}

textarea {
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  resize: none;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  background-color: #fafafa;
}

textarea:focus {
  outline: none;
  border-color: #07C160;
  background-color: white;
}

textarea:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
}

.buttons-group {
  display: flex;
  gap: 0.6rem;
}

button {
  padding: 0.6rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.primary {
  background-color: #07C160;
  color: white;
  border: none;
}

.primary:hover {
  background-color: #06b057;
}

.secondary {
  background-color: #f0f0f0;
  color: #333;
  border: none;
}

.secondary:hover {
  background-color: #e5e5e5;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.input-helper {
  font-size: 0.8rem;
  color: #888;
}

kbd {
  background-color: #f1f1f1;
  border: 1px solid #d1d1d1;
  border-radius: 3px;
  padding: 0 4px;
  font-size: 0.75rem;
}

.criteria-section {
  background-color: white;
  border-radius: 8px;
  padding: 1.2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.criteria-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.criteria-card {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  padding: 0.8rem;
  background-color: #f9f9f9;
  border-radius: 6px;
  border-left: 3px solid #07C160;
}

.criteria-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #E6F7F0;
  color: #07C160;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin-right: 10px;
}

.criteria-content {
  flex: 1;
}

.criteria-title {
  font-weight: 600;
  margin-bottom: 0.2rem;
  color: #333;
}

.criteria-desc {
  font-size: 0.85rem;
  color: #666;
}

@media (max-width: 992px) {
  .test-container {
    grid-template-columns: 1fr;
  }
}
</style> 